<template>
  <van-action-sheet v-model="show" title="频道管理">
    <div class="content">
      <!-- 我的频道 -->
      <div class="channel-box">
        <!-- 标题 -->
        <div class="title">
          我的频道
          <van-button @click="isEdit = !isEdit" plain type="danger" size="mini">
            {{ isEdit ? '取消' : '编辑' }}
          </van-button>
        </div>
        <!-- 内容 -->
        <van-grid>
          <van-grid-item v-for="(item, index) in ownList" :key="item.id">
            <span :class="{active: index === value}" @click="choose(index)">{{ item.name }}</span>
            <van-icon
              v-show="index !== 0 && isEdit"
              class="del-icon"
              name="cross"
              @click="$emit('del', index)"
            />
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 可选频道 -->
      <div class="channel-box">
        <!-- 标题 -->
        <div class="title">可选频道</div>
        <!-- 内容 -->
        <van-grid>
          <van-grid-item
            v-for="item in optionList"
            :key="item.id"
            :text="item.name"
            @click="$emit('add', item)"
          ></van-grid-item>
        </van-grid>
      </div>
    </div>
  </van-action-sheet>
</template>

<script>
export default {
  props: {
    ownList: {
      type: Array,
      required: true
    },
    allList: {
      type: Array,
      required: true
    },
    // 要一个下标
    value: {
      required: true
    }
  },
  data () {
    return {
      show: false,
      isEdit: false
    }
  },
  methods: {
    choose (index) {
      // 1. 隐藏sheet
      this.show = false
      // 2. 把被点的下标传递给父
      this.$emit('input', index)
    }
  },

  computed: {
    // 计算属性名 () {  return 结果 }
    optionList () {
      // 遍历所有频道，找出不在我的频道里的频道，加到新数组里，这样新数组里就所有的可选频道
      /*
      const list = []
      this.allList.forEach(v => {
        // 要找出不在我的频道里的频道, find的结果就是找到的结果（true），如果没找到得到undefined(false)
        const res = this.ownList.find(v2 => {
          if (v.id === v2.id) {
            return true
          } else {
            return false
          }
        })

        if (!res) {
          list.push(v)
        }
      })

      return list
      */
      // 一句话搞定
      // return this.allList.filter(v => !this.ownList.find(v2 => v.id === v2.id))

      // 换一种方式推导：要筛选出不在我的频道里的频道
      return this.allList.filter(v => !this.ownList.find(v2 => v2.id === v.id))
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 16px 16px 160px;
  .channel-box {
    margin-bottom: 20px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .del-icon {
      position: absolute;
      right: 2px;
      top: 3px;
    }

    .active {
      color: red;
    }
  }
}
</style>
